<template>
	<div>
		<div class="line"></div>
		<div class="title">周末去哪儿</div>
		<ul>
			<li class="item" v-for="item of list" :key="item.id">
				<div class="img-wrap">
					<img :src="item.imgUrl" />
				</div>				
				<div class="info">
					<h2>{{item.title}}</h2>
					<p>{{item.desc}}</p>
				</div>				
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'HomeWeekend',
		props: {
			list: Array
		}
	}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
	.line
		height: .2rem
		background: #eee		
	.title
		padding-left: .25rem
		height: .8rem
		line-height: .8rem
		font-weight: bold
	.item
		overflow: hidden
		.img-wrap
			overflow: hidden
			height: 0
			padding-bottom: 38%
			img
				width: 100%
		.info
			padding-left: .2rem
			min-width: 0
			h2
				color: #000
				margin-top: .2rem
			p
				height: .75rem
				line-height: .75rem
				font-size: .25rem
				color: #717171
				ellipsis()
</style>